<script lang="ts" setup>
defineOptions({
    name: 'slot'
})
import slotCom from '@/components/slotCom.vue';
import about from '@/components/about.vue';
// 动态插槽名（可以来自响应式数据）
const dynamicSlotName = ref('slot11');
const slotNames = ref(['slot1', 'slot2', 'slot3']);
const changeDynamic = () => {
    dynamicSlotName.value = dynamicSlotName.value == 'slot11' ? 'slot23' : 'slot11'
}
</script>
<template>
    <div>
        <slotCom>
            <!-- 匿名插槽 -->
            <p style="color: red">你好Vue</p>
            <!-- 具名插槽 -->
            <template #name>
                <p>你好Vue3</p>
                <br>
                <about></about>
            </template>
            <!-- 动态插槽 -->
            <template #[dynamicSlotName]="slotProps">
                <p>这是动态插槽内容（当前插槽名：{{ dynamicSlotName }}） 值：{{ slotProps.data.message }} </p>
            </template>
            <!-- 多个动态插槽 -->
            <template v-for="slotName in slotNames" :key="slotName" #[slotName]="slotProps">
                <p>这是 {{ slotName }} 插槽的内容，数据：{{ slotProps.data.message }}</p>
            </template>
            <!-- 作用域插槽 -->
            <template #data="{ item }">
                <div class="data-item">
                    <span>ID: {{ item.id }}</span>
                    <span>姓名: {{ item.name }}</span>
                </div>
            </template>
            <template #xiaozhu="{ personInfo }">
                <div class="person-info">
                    <p>{{ personInfo.name }} {{ personInfo.age }}{{ personInfo.sui }}</p>
                </div>
            </template>
        </slotCom>
    </div>
    <!-- <about>
        <template #name>
            <p>你好Vue3</p>
        </template>
    </about> -->
    <el-button @click="changeDynamic">
        更改动态具名插槽的值
    </el-button>
</template>

<style scoped>
.data-item {
    padding: 8px 12px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin: 4px 0;
    display: flex;
    gap: 12px;
}

.data-item span {
    color: #606266;
}

.person-info {
    padding: 12px;
    background-color: #ecf5ff;
    border-radius: 4px;
    color: #409eff;
    font-size: 16px;
}
</style>